<template>
  <div style="display: flex; flex-direction: column; height: 100vh;">
    <div style="padding: 10px; background: #f5f5f5;">
      <h3>电子围栏演示</h3>
      <button @click="drawCircle">绘制圆形围栏</button>
      <button @click="drawRectangle">绘制矩形围栏</button>
      <button @click="drawPolygon">绘制多边形围栏</button>
      <button @click="clearAll">清除所有围栏</button>
    </div>
    <div id="container" style="flex: 1;"></div>
  </div>
</template>

<script setup lang="js">
import { onMounted, ref } from 'vue'

let map = null;
let overlays = []; // 存储所有覆盖物

onMounted(() => {
 initMap();
})

function initMap() {
  // 确保DOM元素已经渲染后再初始化地图
  setTimeout(() => {
    map = new BMapGL.Map("container");
    // 设置地图中心点和缩放级别为北京
    var point = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    // 启用滚轮缩放
    map.enableScrollWheelZoom(true);
    
    // 添加默认的电子围栏
    drawDefaultFences();
  }, 100);
}

// 绘制默认的电子围栏
function drawDefaultFences() {
  drawCircle();
  drawRectangle();
  drawPolygon();
}

// 绘制圆形围栏
function drawCircle() {
  clearOverlays(); // 清除之前的围栏
  
  // 创建圆心坐标（北京中心附近）
  var centerPoint = new BMapGL.Point(116.404, 39.915);
  
  // 创建圆
  var circle = new BMapGL.Circle(centerPoint, 1000, {
    strokeColor: "#FF0000",
    strokeWeight: 2,
    strokeOpacity: 0.8,
    fillColor: "#FF0000",
    fillOpacity: 0.3
  });
  
  map.addOverlay(circle);
  overlays.push(circle);
  
  // 调整地图视野以适应圆形
  map.setViewport(circle.getBounds());
}

// 绘制矩形围栏
function drawRectangle() {
  clearOverlays(); // 清除之前的围栏
  
  // 创建矩形边界点
  var bounds = new BMapGL.Bounds(
    new BMapGL.Point(116.39, 39.90),
    new BMapGL.Point(116.42, 39.93)
  );
  
  // 创建矩形
  var rectangle = new BMapGL.Polygon([
    new BMapGL.Point(116.39, 39.90),
    new BMapGL.Point(116.42, 39.90),
    new BMapGL.Point(116.42, 39.93),
    new BMapGL.Point(116.39, 39.93)
  ], {
    strokeColor: "#0000FF",
    strokeWeight: 2,
    strokeOpacity: 0.8,
    fillColor: "#0000FF",
    fillOpacity: 0.3
  });
  
  map.addOverlay(rectangle);
  overlays.push(rectangle);
  
  // 调整地图视野以适应矩形
  map.setViewport(rectangle.getBounds());
}

// 绘制多边形围栏
function drawPolygon() {
  clearOverlays(); // 清除之前的围栏
  
  // 创建多边形顶点（模拟不规则区域）
  var polygonPoints = [
    new BMapGL.Point(116.38, 39.91),
    new BMapGL.Point(116.40, 39.93),
    new BMapGL.Point(116.43, 39.92),
    new BMapGL.Point(116.42, 39.90),
    new BMapGL.Point(116.40, 39.89)
  ];
  
  // 创建多边形
  var polygon = new BMapGL.Polygon(polygonPoints, {
    strokeColor: "#00FF00",
    strokeWeight: 2,
    strokeOpacity: 0.8,
    fillColor: "#00FF00",
    fillOpacity: 0.3
  });
  
  map.addOverlay(polygon);
  overlays.push(polygon);
  
  // 调整地图视野以适应多边形
  map.setViewport(polygon.getBounds());
}

// 清除所有围栏
function clearAll() {
  clearOverlays();
}

// 清除覆盖物
function clearOverlays() {
  for (var i = 0; i < overlays.length; i++) {
    map.removeOverlay(overlays[i]);
  }
  overlays = [];
}

</script>

<style scoped lang="less">
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
}
</style>